<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="startEdit">Start edit</p>
    <p @click="endEdit">End edit</p>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
  name: "AddEditabled.component",
  components: {Maptalks},
  setup() {
    let point = ref(null), line = ref(null), polygon = ref(null), rectangle = ref(null), circle = ref(null),
        ellipse = ref(null), textbox = ref(null), label = ref(null)

    const startEdit = () => {
      point.startEdit();
      line.startEdit();
      polygon.startEdit();
      rectangle.startEdit();
      circle.startEdit();
      ellipse.startEdit();
      textbox.startEdit();
      label.startEditText();
    }

    const endEdit = () => {
      point.endEdit();
      line.endEdit();
      polygon.endEdit();
      rectangle.endEdit();
      circle.endEdit();
      ellipse.endEdit();
      textbox.endEdit();
      label.endEditText();
    }

    let mapOnLoadCB = (map) => {
      map.setZoom(14)
      let center = map.getCenter();

      let point = new maptalks.Marker(
          center.add(-0.001, 0.005),
          {
            visible: true,
            editable: true,
            cursor: "pointer",
            shadowBlur: 0,
            shadowColor: "black",
            draggable: false,
            dragShadow: false, // display a shadow during dragging
            drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
            symbol: {
              "markerType": "ellipse",
              "markerWidth": 40,
              "markerHeight": 40,
              "markerFill": "rgb(216,115,149)",
              "markerLineColo": "#fff"
            }
          }
      );

      let line = new maptalks.LineString([
        center.add(-0.001, 0.005),
        center.add(-0.003, 0.009),
      ], {
        arrowStyle: null, // arrow-style : now we only have classic
        arrowPlacement: "vertex-last", // arrow"s placement: vertex-first, vertex-last, vertex-firstlast, point
        visible: true,
        editable: true,
        cursor: null,
        shadowBlur: 0,
        shadowColor: "black",
        draggable: false,
        dragShadow: false, // display a shadow during dragging
        drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
        symbol: {
          "lineColor": "#1bbc9b",
          "lineWidth": 3
        }
      });

      let polygon = new maptalks.Polygon([
        [
          center.add(-0.011, 0.015),
          center.add(-0.022, 0.016),
          center.add(-0.033, 0.017),
          center.add(-0.044, 0.018),
          center.add(-0.055, 0.019),
        ]
      ], {
        visible: true,
        editable: true,
        cursor: "pointer",
        shadowBlur: 0,
        shadowColor: "black",
        draggable: false,
        dragShadow: false, // display a shadow during dragging
        drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
        symbol: {
          "lineColor": "#34495e",
          "lineWidth": 2,
          "polygonFill": "rgb(135,196,240)",
          "polygonOpacity": 0.6
        }
      });

      let rectangle = new maptalks.Rectangle(center.add(-0.018, 0.012), 800, 700, {
        symbol: {
          lineColor: "#34495e",
          lineWidth: 2,
          polygonFill: "#34495e",
          polygonOpacity: 0.4
        }
      });

      let circle = new maptalks.Circle(center.add(0.002, 0.008), 500, {
        symbol: {
          lineColor: "#34495e",
          lineWidth: 2,
          polygonFill: "#1bbc9b",
          polygonOpacity: 0.4
        }
      });

      let ellipse = new maptalks.Ellipse(center.add(0.003, -0.005), 1000, 600, {
        symbol: {
          lineColor: "#34495e",
          lineWidth: 2,
          polygonFill: "rgb(216,115,149)",
          polygonOpacity: 0.4
        }
      });

      let textbox = new maptalks.TextBox(
          "This is a textbox, with very long content", // content
          center.add(0.004, -0.009),  // coordinate
          200,                 // width
          90,                  // height
          {
            "draggable": true,
            "textStyle": {
              "wrap": true,          // auto wrap text
              "padding": [12, 8],    // padding of textbox
              "verticalAlignment": "top",
              "horizontalAlignment": "right",
              "symbol": {
                "textFaceName": "monospace",
                "textFill": "#34495e",
                "textHaloFill": "#fff",
                "textHaloRadius": 4,
                "textSize": 18,
                "textWeight": "bold"
              }
            },
            "boxSymbol": {
              // box"s symbol
              "markerType": "square",
              "markerFill": "rgb(135,196,240)",
              "markerFillOpacity": 0.9,
              "markerLineColor": "#34495e",
              "markerLineWidth": 1
            }
          }
      );

      let label = new maptalks.Label("label with box", center.add(-0.01, 0.015), {
        "textSymbol": {
          "textFaceName": "sans-serif",
          "textFill": "#fff",
          "textSize": 18
        },
        "boxStyle": {
          "padding": [12, 8],
          "symbol": {
            "markerType": "square",
            "markerFillOpacity": 0.9,
            "markerLineColor": "#34495e",
            "markerFill": "#34495e",
            "markerLineWidth": 1
          }
        }
      })

      new maptalks.VectorLayer(MapLayerConst.MAP_EDITABLED_LAYER)
          .addGeometry([point, line, polygon, rectangle, circle, ellipse, textbox, label])
          .addTo(map);

    };

    return {
      mapOnLoadCB,
      startEdit, endEdit
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}
</style>
